<template>
  <div class="layout_one">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="time" label="日期" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="playRecord(row.event)"
            >播放录像</el-button
          >
          <el-button type="primary" @click="getFile(row.event)"
            >生成文件</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <play ref="playRef" />
  </div>
</template>

<script lang="ts">
import {
  defineAsyncComponent,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { RRwebPlayerOptions } from "rrweb-player";
import "rrweb-player/dist/style.css";
import pako from "pako";
import { eventWithTime } from "rrweb/typings/types";
import RecordRTC from "recordrtc";

export default defineComponent({
  name: "RrWeb",
  components: {
    Play: defineAsyncComponent(() => import("./components/play.vue")),
  },
  setup() {
    const state = reactive({
      replayer: {} as RRwebPlayerOptions,
      tableData: [],
      dialogVisible: false,
      replayRef: {} as HTMLElement,
      playRef: {} as any,
    });

    // 播放录制
    const playRecord = (event: eventWithTime[]) => {
      state.playRef.playRecord(event);
      // state.dialogVisible = true;
      // console.log("state.replayRef", state.replayRef);
      // const replay = document.getElementById("replaycontent") as HTMLElement;
      // console.log("replay", replay);
      // new rrwebPlayer({
      //   target: replay,
      //   props: {
      //     events: event,
      //     speedOption: [1, 2, 5, 10],
      //   },
      // });
    };

    // 解压
    const unzip = (b64Data: string) => {
      const strData = window.atob(b64Data);
      return pako.ungzip(
        strData.split(",").map((el) => {
          return parseInt(el);
        }),
        { to: "string" }
      );
    };

    const getFile = (event: eventWithTime[]) => {
      console.log(JSON.stringify(event));
      let str = new Blob([JSON.stringify(event)], {
        type: "text/plain;charset=utf-8",
      });
      // let file = new File([str], "aaa.txt");
      // console.log(file);
      RecordRTC.invokeSaveAsDialog(str, "aaa.txt");
    };

    onMounted(() => {
      let record = localStorage.getItem("record");
      if (record) {
        state.tableData = JSON.parse(unzip(record));
      }
    });

    return {
      ...toRefs(state),
      playRecord,
      getFile,
    };
  },
});
</script>
    
<style scoped>
.layout_one {
  background: #fff;
  padding: 20px;
  height: calc(100vh - 140px);
  box-shadow: 0 0 3px #e4e7ed;
  /* position: absolute; */
  /* .father {
  margin: auto;
  position: relative;
  width: 500px;
  height: 600px;
  background-color: cyan;
} */
}
.layout_one:hover {
  box-shadow: 0 0 5px #cdd0d6;
}
</style>